home *** CD-ROM | disk | FTP | other *** search
/ .net 2000 August / NET74.ISO / pc / netscape online / WIN95_NT / NETSCAPE / COMM.Z / Button.js < prev    next >
Encoding:
JavaScript  |  1999-05-04  |  8.0 KB  |  597 lines
  1. /* ==================================================================
  2.  
  3. FILE:   Button.js
  4.  
  5. DESCR:  Button control for Netscape Help implementation.
  6.  
  7. NOTES:  May require routine(s) from Utility.js.
  8.  
  9. ================================================================== */
  10.  
  11.  
  12.  
  13. var UP       = 0
  14.  
  15. var DOWN     = 1
  16.  
  17. var SELECTED = 2
  18.  
  19. var DISABLED = 3
  20.  
  21.  
  22.  
  23. // Disables the button bar without visibly disabling the buttons.
  24.  
  25. var bDisableBtnBar = false
  26.  
  27.  
  28.  
  29. // Bind events to event handler.
  30.  
  31. document.captureEvents( Event.MOUSEDOWN )
  32.  
  33. document.onmousedown = mouseDownEvt
  34.  
  35.  
  36.  
  37. function mouseDownEvt( evt )
  38.  
  39. {
  40.  
  41.    //alert( "mouseDownEvt()" )
  42.  
  43.  
  44.  
  45.    // Block right click events to block potentially destabilizing local menus.
  46.  
  47.    if ( evt.which == 3 ) {
  48.  
  49.       return false
  50.  
  51.    }
  52.  
  53.  
  54.  
  55.    // Block left mouse down when bar is disabled.
  56.  
  57.    else if ( bDisableBtnBar ) {
  58.  
  59.       return false
  60.  
  61.    }
  62.  
  63.  
  64.  
  65.    return true
  66.  
  67. }
  68.  
  69.  
  70.  
  71. /*
  72.  
  73. DESCR:   Button class.
  74.  
  75. PARAMS:  upImage        Image file for up state.
  76.  
  77.          downImage      Image file for down state.
  78.  
  79.          selectedImage  Image file for selected state.
  80.  
  81.          disabledImage  Image file for disabled state.
  82.  
  83.          command        Command to execute.
  84.  
  85.          bBlender       Specifies that the button should behave as a
  86.  
  87.                         blender-type button.
  88.  
  89.          label          Text to go next to button. Use "" for no label.
  90.  
  91.          toolTip        Mouse tip text. Use "" for no tool tip.
  92.  
  93.          bar            The buttonBar object.
  94.  
  95. RETURNS:
  96.  
  97. NOTES:
  98.  
  99. */
  100.  
  101. function button( upImage, downImage, selectedImage, disabledImage, command,
  102.  
  103.                  bBlender, label, toolTip, bar )
  104.  
  105. {
  106.  
  107.    this.state = UP  // Default state.
  108.  
  109.  
  110.  
  111.    this.buttonNumber = bar.aButtons.length
  112.  
  113.  
  114.  
  115.    this.aImages = new Array( upImage, downImage, selectedImage, disabledImage )
  116.  
  117.  
  118.  
  119.    this.command  = command
  120.  
  121.    this.bBlender = bBlender
  122.  
  123.    this.bOn      = false
  124.  
  125.    this.label    = label
  126.  
  127.    this.toolTip  = toolTip
  128.  
  129.    this.bar      = bar
  130.  
  131.  
  132.  
  133.    this.mouseOverEvt = mouseOverEvt
  134.  
  135.    this.mouseOutEvt  = mouseOutEvt
  136.  
  137.    this.clickEvt     = clickEvt
  138.  
  139.    this.enable       = enable
  140.  
  141.    this.turnOff      = turnOff
  142.  
  143.    this.setState     = setState
  144.  
  145. }
  146.  
  147.  
  148.  
  149.    /*
  150.  
  151.    DESCR:   Enables and disables a button.
  152.  
  153.    PARAMS:  bEnable  Pass true for enable; false for disable.
  154.  
  155.    RETURNS: 
  156.  
  157.    NOTES:   
  158.  
  159.    */
  160.  
  161.    function enable( bEnable )
  162.  
  163.    {
  164.  
  165.       this.setState( bEnable ? UP : DISABLED )
  166.  
  167.    }
  168.  
  169.  
  170.  
  171.    /*
  172.  
  173.    DESCR:   Turns the button off if it is a blender button that is on.
  174.  
  175.    PARAMS:
  176.  
  177.    RETURNS: 
  178.  
  179.    NOTES:
  180.  
  181.    */
  182.  
  183.    function turnOff()
  184.  
  185.    {
  186.  
  187.       if ( this.bBlender && this.bOn ) {
  188.  
  189.          this.setState( UP )
  190.  
  191.       }
  192.  
  193.    }
  194.  
  195.  
  196.  
  197.    /*
  198.  
  199.    DESCR:   Assigns state and sets button image.
  200.  
  201.    PARAMS:  newState  State value for the button.
  202.  
  203.    RETURNS: 
  204.  
  205.    NOTES:   
  206.  
  207.    */
  208.  
  209.    function setState( newState )
  210.  
  211.    {
  212.  
  213.       this.state = newState
  214.  
  215.       if ( this.bBlender && this.state == UP ) this.bOn = false
  216.  
  217.  
  218.  
  219.       document.images[ this.buttonNumber ].src = this.aImages[ this.state ]
  220.  
  221.    }
  222.  
  223.  
  224.  
  225.    /*
  226.  
  227.    DESCR:   Mouse over event handler.
  228.  
  229.    PARAMS:  
  230.  
  231.    RETURNS: 
  232.  
  233.    NOTES:   
  234.  
  235.    */
  236.  
  237.    function mouseOverEvt()
  238.  
  239.    {
  240.  
  241.       if ( this.state == DISABLED ) return
  242.  
  243.       if ( this.bBlender && this.bOn ) return
  244.  
  245.  
  246.  
  247.       if ( this.state == UP ) {
  248.  
  249.          this.setState( SELECTED )
  250.  
  251.       }
  252.  
  253.    }
  254.  
  255.  
  256.  
  257.    /*
  258.  
  259.    DESCR:   Mouse out event handler.
  260.  
  261.    PARAMS:  
  262.  
  263.    RETURNS: 
  264.  
  265.    NOTES:   
  266.  
  267.    */
  268.  
  269.    function mouseOutEvt()
  270.  
  271.    {
  272.  
  273.       if ( this.state == DISABLED ) return
  274.  
  275.       if ( this.bBlender && this.bOn ) return
  276.  
  277.  
  278.  
  279.       this.setState( UP )
  280.  
  281.    }
  282.  
  283.  
  284.  
  285.    /*
  286.  
  287.    DESCR:   Mouse click event handler.
  288.  
  289.    PARAMS:  
  290.  
  291.    RETURNS: 
  292.  
  293.    NOTES:   
  294.  
  295.    */
  296.  
  297.    function clickEvt()
  298.  
  299.    {
  300.  
  301.       if ( this.state == DISABLED ) return
  302.  
  303.       if ( this.bBlender && this.bOn ) return
  304.  
  305.  
  306.  
  307.       this.setState( DOWN )
  308.  
  309.  
  310.  
  311.       // If this is a blender button, turn off the other blenders.
  312.  
  313.       if ( this.bBlender ) {
  314.  
  315.          for ( var i = 0; i < this.bar.aButtons.length; i++ ) {
  316.  
  317.             this.bar.aButtons[ i ].turnOff()
  318.  
  319.          }
  320.  
  321.          this.bOn = true
  322.  
  323.       }
  324.  
  325.  
  326.  
  327.       // Execute command.
  328.  
  329.       eval( this.command )
  330.  
  331.    }
  332.  
  333.  
  334.  
  335. // End class definition: button.
  336.  
  337.  
  338.  
  339. /*
  340.  
  341. DESCR:   Button bar class.
  342.  
  343. PARAMS:  bgColor     Background color for the bar.
  344.  
  345.          bLandscape  Pass true for landscape orientation, false for portrait.
  346.  
  347.          align       Button alignment. Pass "LEFT" or "RIGHT".
  348.  
  349.          width       Bar width in pixels or percentage.
  350.  
  351.          spacing     For landscape, this refers to additional pixels to right
  352.  
  353.                      of button image. Use "" for no extra space. For portrait,
  354.  
  355.                      this refers to the height of an additional row between
  356.  
  357.                      buttons. Use "" for no extra space.
  358.  
  359.          barName     Identifier representing the bar.
  360.  
  361. RETURNS: 
  362.  
  363. NOTES:
  364.  
  365. */
  366.  
  367. function buttonBar( bgColor, bLandscape, align, width, spacing, barName )
  368.  
  369. {
  370.  
  371.    //top.trace( "buttonBar constructor()" )
  372.  
  373.  
  374.  
  375.    this.aButtons   = new Array()
  376.  
  377.    this.bgColor    = bgColor
  378.  
  379.    this.bLandscape = bLandscape
  380.  
  381.    this.align      = align
  382.  
  383.    this.width      = width
  384.  
  385.    this.spacing    = spacing
  386.  
  387.    this.barName    = barName
  388.  
  389.  
  390.  
  391.    this.addButton = addButton
  392.  
  393.    this.create    = create
  394.  
  395. }
  396.  
  397.  
  398.  
  399.    /*
  400.  
  401.    DESCR:   Adds a button to a bar.
  402.  
  403.    PARAMS:  button  The button object.
  404.  
  405.    RETURNS: 
  406.  
  407.    NOTES:   
  408.  
  409.    */
  410.  
  411.    function addButton( button )
  412.  
  413.    {
  414.  
  415.       this.aButtons[ this.aButtons.length ] = button
  416.  
  417.    }
  418.  
  419.    
  420.  
  421.    /*
  422.  
  423.    DESCR:   Writes the document.
  424.  
  425.    PARAMS:  
  426.  
  427.    RETURNS: 
  428.  
  429.    NOTES:   
  430.  
  431.    */
  432.  
  433.    function create()
  434.  
  435.    {
  436.  
  437.       if ( this.aButtons.length == 0 ) return false
  438.  
  439.  
  440.  
  441.       var html
  442.  
  443.  
  444.  
  445.       html  = "<HTML>"
  446.  
  447.       html  += "<HEAD>"
  448.  
  449. //      html += "<STYLE TYPE = 'text/javascript'>"
  450.  
  451. //      html += "classes.label.all.fontFamily = 'arial';"
  452.  
  453. //      html += "classes.label.all.fontSize = '12px';"
  454.  
  455. //      html += "classes.label.all.color = '#000066';"
  456.  
  457. //      html += "</STYLE>"
  458.  
  459.       html += "</HEAD>"
  460.  
  461.  
  462.  
  463.       html +=  "<BODY BGCOLOR = " + this.bgColor + ">"
  464.  
  465.  
  466.  
  467.       html += "<TABLE BORDER = 0 ALIGN = " + this.align + " WIDTH = " + this.width + ">"
  468.  
  469.  
  470.  
  471.       // For each button.
  472.  
  473.       html += "<TR>"
  474.  
  475.       for ( var i = 0; i < this.aButtons.length; i++ ) {
  476.  
  477.          html += "<TD ALIGN = 'center'>"
  478.  
  479.          html += "<A HREF = 'javascript:" + this.barName + ".aButtons[" + i + "].clickEvt()' "
  480.  
  481.          html += "ONMOUSEOVER = '" + this.barName + ".aButtons[" + i + "].mouseOverEvt()' "
  482.  
  483.          html += "ONMOUSEOUT = '" + this.barName + ".aButtons[" + i + "].mouseOutEvt()'>"
  484.  
  485.          html += "<IMG SRC = '" + this.aButtons[ i ].aImages[ this.aButtons[ i ].state ] + "' BORDER = 0 ALT = '" + this.aButtons[ i ].toolTip + "'>"
  486.  
  487.          html += "</A>"
  488.  
  489.          if ( this.spacing != "" ) {
  490.  
  491.             html += "<SPACER TYPE = 'block' WIDTH = " + this.spacing + ">"
  492.  
  493.          }
  494.  
  495.          html += "</TD>"
  496.  
  497.  
  498.  
  499.          if ( !this.bLandscape ) {
  500.  
  501.  
  502.  
  503.             // Add label cell and terminate row. Add spacer row.
  504.  
  505.             html += "<TD ALIGN = 'left'>"
  506.  
  507.             html += "<DIV CLASS = label>"
  508.  
  509.             html += this.aButtons[ i ].label 
  510.  
  511.             html += "</DIV>"
  512.  
  513.             html += "</TD>"
  514.  
  515.             html += "</TR>"
  516.  
  517.             if ( this.spacing != "" ) {
  518.  
  519.                html += "<TR><TD><SPACER TYPE = 'block' HEIGHT = " +
  520.  
  521.                        this.spacing + "></TD></TR>"
  522.  
  523.             }
  524.  
  525.          }
  526.  
  527.       }
  528.  
  529.  
  530.  
  531.       if ( this.bLandscape ) {
  532.  
  533.  
  534.  
  535.          // End row and fill next with labels.
  536.  
  537.          html += "</TR>"
  538.  
  539.          html += "<TR>"
  540.  
  541.          for ( var i = 0; i < this.aButtons.length; i++ ) {
  542.  
  543.             html += "<TD ALIGN = 'center'>"
  544.  
  545.             html += "<DIV CLASS = label>"
  546.  
  547.             html += this.aButtons[ i ].label
  548.  
  549.             html += "</DIV>"
  550.  
  551.             if ( this.spacing != "" ) {
  552.  
  553.                html += "<SPACER TYPE = 'block' WIDTH = " + this.spacing + ">"
  554.  
  555.             }
  556.  
  557.             html += "</TD>"
  558.  
  559.          }
  560.  
  561.          html += "</TR>"
  562.  
  563.       }
  564.  
  565.  
  566.  
  567.       html += "</TABLE></BODY></HTML>"
  568.  
  569.  
  570.  
  571.       with ( document ) {
  572.  
  573.          open()
  574.  
  575.          write( html )
  576.  
  577.          close()
  578.  
  579.       }
  580.  
  581.  
  582.  
  583.       return true
  584.  
  585.    }
  586.  
  587.  
  588.  
  589. // End class definition: buttonBar.
  590.  
  591.  
  592.  
  593.  
  594.  
  595.  
  596.  
  597.